<template>
  <div>
    <el-button @click="showSome">访问some——players接口</el-button>
    <el-input v-model="pageNumber"></el-input>
    <el-button @click="showAny">访问any——players接口</el-button>
    <el-table
      :data="results"
      ref="resultsTable"
      height="480px"
      stripe
      highlight-current-row
      @row-click="rowClick"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" align="center"></el-table-column>

      <el-table-column type="expand">
        <template #default="{ row }">
          <el-descriptions border>
            <el-descriptions-item label="填充1">具体信息1</el-descriptions-item>
            <el-descriptions-item label="playerCode">{{
              row.playerCode
            }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>

      <el-table-column prop="playerCode" label="ID/Code"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>

      <el-table-column
        label="profession"
        :formatter="professionFormat"
        align="center"
      >
      </el-table-column>
      <el-table-column width="180px" fixed="left">
        <template #default="{ row }">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            @click="openById(row.playerCode)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-edit"
            @click="deleteById(row.playerCode)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-form
      ref="player"
      :model="player"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item prop="nickname" label="用户名：">
        <el-input v-model.trim="player.nickname"> </el-input>
      </el-form-item>

      <el-form-item prop="playerCode" label="code：">
        <el-input v-model="player.playerCode"> </el-input>
      </el-form-item>
      <el-form-item prop="usernameFk" label="usernameFk：">
        <el-input v-model="player.usernameFk"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="playerSubmit()"
          >提交
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.player.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
/**
     * 页面核心数据结构体说明文档
     *{
    "playerId": 7,
    "playerCode": "8110783",
    "nickname": "",
    "goldCoin": 73,
    "silverCoin": 100,
    "profession": "accountant",
    "usernameFk": "2016207060",
    "version": 0
  },

     player: {
        goldCoin: 40,
        nickname: "张三",
        playerCode: "1112221",
        playerId: 0,
        profession: "architect",
        silverCoin: 90,
        usernameFk: "1112222",
        version: 0,
      },
     *
     */
// import New from './components/New.vue';
export default {
  name: "TestAxios",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      results: [],
      pageNumber: 1,
      // player: {
      //   goldCoin: 40,
      //   nickname: "张三",
      //   playerCode: "232323",
      //   playerId: 200,
      //   profession: "architect",
      //   silverCoin: 90,
      //   usernameFk: "323232323",
      //   version: 0,
      // },
      player: {
        goldCoin: 80,
        nickname: "张三",
        playerCode: "33333",
        playerId: 100,
        profession: "architect",
        silverCoin: 90,
        usernameFk: "4444",
        version: 0,
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    showSome() {
      this.$http({
        method: "get",
        url: "http://localhost:9090/ceto/player/showSome",
      }).then(
        (res) => {
          // this.$message.warning(JSON.stringify(res.data));
          this.results = res.data;
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    showAny() {
      // console.log(this.pageNumber);
      this.$http({
        method: "get",
        url:
          "http://localhost:9090/ceto/player/showAny?pageNum=" +
          this.pageNumber,
        // url: `http://localhost:9090/ceto/player/showAny?pageNum=${this.pageNumber}`
      }).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    playerSubmit() {
      console.log(this.player);
      this.$http({
        method: "post",
        url: "http://localhost:9090/ceto/player/insert",
        data: this.player,
      }).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
        },
        (error) => {
          console.log(".player request error : " + error.response.status);
        }
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
